/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
import React, { Component } from 'react'

class Child extends Component {
    render() {
        console.log("this.props", this.props);
        let headerSlot = []
        let footerSlot = []
        let defaultSlot = []
        let { children, text } = this.props
        children = React.Children.toArray(children);
        children.forEach(child => {
            let { slot } = child.props;
            if (slot === 'header') {
                headerSlot.push(child)
            } else if (slot === 'footer') {
                footerSlot.push(child)
            }else{
                defaultSlot.push(child)
            }
        });
        return <div>
            {headerSlot}
            child-{text}
            <button>click-子</button>
            {footerSlot}
        </div>
    }
}

export default class App extends Component {
    state = {
        text: "111111111"
    }
    render() {
        return (
            <div>
                <button onClick={() => {
                    this.setState({
                        text: "2222222"
                    })
                }}>click-父</button>
                <Child text={this.state.text}>
                    <span slot="header">我是页脚</span>
                    <span>哈哈哈哈</span>
                    <span slot="footer">我是页眉</span>
                </Child>
            </div>
        )
    }
}

